import React, { useState, useEffect, useMemo } from 'react'
import Cpu from './components/Cpu';
import Memory from './components/Memory';
import myContext from './usecontext.js'
import Information from './components/Information'
import Java from './components/Java'
import Disk from './components/Disk'
import { getmonitorserve } from '@/api/systemmonitoring/ServeMonitoring.js'
import { Card } from 'antd';
import './service.scss'


export default function ServiceMonitorIng() {

  const [serveinfo, setserveinfo] = useState({
    cpu: {},
    jvm: {},
    mem: {},
    sys: {},
    sysFiles: [{}, {}]
  })
  useEffect(() => {
    getList()
  }, [])

  const getList = async () => {
    const res = await getmonitorserve()
    // console.log(res);
    setserveinfo(res.data)
  }
  // useMemo(() => {

  // }, [serveinfo])


  return (

    <myContext.Provider value={serveinfo}>
      <div className='header'>
        <Card title="cpu" className='header-box'>
          <Cpu></Cpu>
        </Card>
        <Card title="内存" className='header-box'>
          <Memory></Memory>
        </Card>
      </div >
      <div className='information'>
        <Card title="服务器信息">
          <Information></Information>
        </Card>
      </div>
      <div className='java'>
        <Card title="java虚拟机信息">
          <Java></Java>
        </Card>
      </div>

      <div className='disk'>
        <Card title="磁盘状态">
          <Disk></Disk>
        </Card>
      </div>
    </myContext.Provider >
  )
}